<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>时钟</title>
</head>
<body>
<div id="app">
    <div class="content">
        <div class="main-content current">
            <div class="year">
                <span>{{year}}</span>
            </div>
        </div>
        <div class="main-content month-content" :style="monthContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="month in monthList"
                 :class="{current:!(monthContentRotate.deg + month.deg)}"
                 :style="'transform:rotate('+month.deg+'deg);transition: all 1s;'">
                <div class="month">
                    <span>{{month.label}}</span>
                </div>
            </div>
        </div>
        <div class="main-content day-content" :style="dayContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="day in dayList"
                 :class="{current:!(dayContentRotate.deg + day.deg)}"
                 :style="'transform:rotate('+day.deg+'deg);transition: all 1s;'">
                <div class="day">
                    <span>{{day.label}}</span>
                </div>
            </div>
        </div>
        <div class="main-content week-content" :style="weekContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="week in weekList"
                 :class="{current:!(weekContentRotate.deg + week.deg)}"
                 :style="'transform:rotate('+week.deg+'deg);transition: all 1s;'">
                <div class="week">
                    <span>{{week.label}}</span>
                </div>
            </div>
        </div>
        <div class="main-content shichen-content" :style="shiChenContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="shichen in shiChenList"
                 :class="{current:!(shiChenContentRotate.deg + shichen.deg)}"
                 :style="'transform:rotate('+shichen.deg+'deg);transition: all 1s;'">
                <div class="shichen">
                    <span>{{shichen.label}}</span>
                </div>
            </div>
        </div>
        <div class="main-content hour-content" :style="hourContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="hour in hourList"
                 :class="{current:!(hourContentRotate.deg + hour.deg)}"
                 :style="'transform:rotate('+hour.deg+'deg);transition: all 1s;'">
                <div class="hour">
                    <span>{{hour.label}}</span>
                </div>
            </div>
        </div>
        <div class="main-content minute-content" :style="minuteContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="minute in minuteList"
                 :class="{current:!(minuteContentRotate.deg + minute.deg)}"
                 :style="'transform:rotate('+minute.deg+'deg);transition: all 1s;'">
                <div class="minute">
                    <span>{{minute.label}}</span>
                </div>
            </div>
        </div>
        <div class="main-content second-content" :style="secondContentRotate.style">
            <div class="border-radius"></div>
            <div class="main-content" v-for="second in secondList"
                 :class="{current:!(secondContentRotate.deg + second.deg)}"
                 :style="'transform:rotate('+second.deg+'deg);transition: all 1s;'">
                <div class="second">
                    <span>{{second.label}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            date: new Date(),
            shiChen: [
                {label: '子时', min: '23', max: '1'},
                {label: '丑时', min: '1', max: '3'},
                {label: '寅时', min: '3', max: '5'},
                {label: '卯时', min: '5', max: '7'},
                {label: '辰时', min: '7', max: '9'},
                {label: '巳时', min: '9', max: '11'},
                {label: '午时', min: '11', max: '13'},
                {label: '未时', min: '13', max: '15'},
                {label: '申时', min: '15', max: '17'},
                {label: '酉时', min: '17', max: '19'},
                {label: '戌时', min: '19', max: '21'},
                {label: '亥时', min: '21', max: '23'},
            ],
        },
        mounted() {
            setInterval(() => {
                this.getTime();
            }, 1000);
        },
        methods: {
            cn(num) {
                num = Number(num);
                let upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
                let length = String(num).length;
                if (length === 1) {
                    return upperCaseNumber[num];
                } else if (length === 2) {
                    if (num === 10) {
                        return upperCaseNumber[num];
                    } else if (num > 10 && num < 20) {
                        return '十' + upperCaseNumber[String(num).charAt(1)];
                    } else {
                        return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '');
                    }
                } else {
                    let str = '';
                    for (let i in String(num)) {
                        str += upperCaseNumber[String(num).charAt(i)]
                    }
                    return str;
                }
            },
            getTime() {
                this.date = new Date();
            },
        },
        computed: {
            year() {
                return this.cn(this.date.getFullYear());
            },
            monthContentRotate() {
                let deg = this.date.getMonth() * (360 / 12);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            dayContentRotate() {
                let deg = (this.date.getDate() - 1) * (360 / this.totalDate);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            weekContentRotate() {
                let deg = this.date.getDay() * (360 / 7);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            shiChenContentRotate() {
                let hour = this.date.getHours();
                let curr = 0;
                for (let i = 0; i < this.shiChen.length; i++) {
                    if (hour >= this.shiChen[i].min && hour <= this.shiChen[i].max) {
                        curr = i;
                        break;
                    }
                }
                let deg = curr * (360 / 12);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            hourContentRotate() {
                let deg = this.date.getHours() * (360 / 24);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            minuteContentRotate() {
                let deg = this.date.getMinutes() * (360 / 60);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            secondContentRotate() {
                let deg = this.date.getSeconds() * (360 / 60);
                return {
                    style: 'transform:rotate(' + deg + 'deg);transition: all 300ms;',
                    deg: deg
                };
            },
            totalDate() {
                let year = this.date.getFullYear();
                let month = this.date.getMonth() + 1;
                return new Date(year, month, 0).getDate();
            },
            monthList() {
                let list = [];
                let total = 12;
                let deg = 360 / total;
                for (let i = 0; i < total; i++) {
                    list.push({
                        label: this.cn(i+1) + '月',
                        deg: -deg * i,
                    })
                }
                return list;
            },
            dayList() {
                let list = [];
                let total = this.totalDate;
                let deg = 360 / total;
                for (let i = 1; i <= total; i++) {
                    list.push({
                        label: this.cn(i) + '日',
                        deg: -deg * (i - 1),
                    })
                }
                return list;
            },
            weekList() {
                let list = [];
                let total = 7;
                let deg = 360 / total;
                let cnList = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                for (let i = 0; i < total; i++) {
                    list.push({
                        label: cnList[i],
                        deg: -deg * i,
                    })
                }
                return list;
            },
            shiChenList() {
                let list = [];
                let total = 12;
                let deg = 360 / total;
                for (let i = 0; i < total; i++) {
                    list.push({
                        label: this.shiChen[i].label,
                        deg: -deg * i,
                    })
                }
                return list;
            },
            hourList() {
                let list = [];
                let total = 24;
                let deg = 360 / total;
                for (let i = 0; i < total; i++) {
                    list.push({
                        label: this.cn(i) + '时',
                        deg: -deg * i,
                    })
                }
                return list;
            },
            minuteList() {
                let list = [];
                let total = 60;
                let deg = 360 / total;
                for (let i = 0; i < total; i++) {
                    list.push({
                        label: this.cn(i) + '分',
                        deg: -deg * i,
                    })
                }
                return list;
            },
            secondList() {
                let list = [];
                let total = 60;
                let deg = 360 / total;
                for (let i = 0; i < total; i++) {
                    list.push({
                        label: this.cn(i) + '秒',
                        deg: -deg * i,
                    })
                }
                return list;
            }
        }
    })
</script>
<style>
    .border-radius::before{
        content: ' ';
        position: absolute;
        border: 1px solid #000;
        border-radius: 50%
    }
    .second-content > .border-radius::before{
        top: -370px;
        bottom: -370px;
        left: -370px;
        right: -370px;
    }
    .minute-content > .border-radius::before{
        top: -300px;
        bottom: -300px;
        left: -300px;
        right: -300px;
    }
    .hour-content > .border-radius::before{
        top: -240px;
        bottom: -240px;
        left: -240px;
        right: -240px;
    }
    .shichen-content > .border-radius::before{
        top: -200px;
        bottom: -200px;
        left: -200px;
        right: -200px;
    }
    .week-content > .border-radius::before{
        top: -145px;
        bottom: -145px;
        left: -145px;
        right: -145px;
    }
    .day-content > .border-radius::before{
        top: -80px;
        bottom: -80px;
        left: -80px;
        right: -80px;
    }
    .month-content > .border-radius::before{
        top: -40px;
        bottom: -40px;
        left: -40px;
        right: -40px;
    }
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-attachment: fixed;
        color: #000000;
        /*color: #F5F4F6;*/
        font-size: 12px;
        font-weight: bold;
        overflow: hidden;
        width: 1000px;
        height: 900px;
        font-family: "微软雅黑", serif;
    }

    audio {
        position: absolute;
        right: 0;
        opacity: 0.1;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }

    audio:hover {
        opacity: 1;
    }

    .current {
        color: #D1A3F7;
    }

    video {
        z-index: -1;
        position: fixed;
        min-width: 100%;
        min-height: 100%;
    }

    .main-content {
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .main-content .year {
        position: relative;
        top: -13px;
        left: -38px;
        text-align: center;
    }

    .main-content .year span {
        position: absolute;
        width: 80px;
    }

    .main-content .month {
        position: relative;
        top: -13px;
        left: 40px;
    }

    .month span {
        position: absolute;
        width: 60px;
        padding: 0 10px;
    }

    .main-content .day {
        position: relative;
        top: -13px;
        left: 80px;
    }

    .day span {
        position: absolute;
        width: 65px;
        padding: 0 10px;
    }

    .main-content .week {
        position: relative;
        top: -13px;
        left: 145px;
    }

    .week span {
        position: absolute;
        width: 65px;
        padding: 0 10px;
    }

    .main-content .shichen {
        position: relative;
        top: -13px;
        left: 200px;
    }

    .shichen span {
        position: absolute;
        width: 125px;
        padding: 0 10px;
    }

    .main-content .hour {
        position: relative;
        top: -13px;
        left: 240px;
    }

    .hour span {
        position: absolute;
        width: 60px;
        padding: 0 10px;
    }

    .main-content .minute {
        position: relative;
        top: -13px;
        left: 300px;
    }

    .minute span {
        position: absolute;
        width: 60px;
        padding: 0 10px;
    }

    .main-content .second {
        position: relative;
        top: -13px;
        left: 370px;
    }

    .second span {
        position: absolute;
        width: 60px;
        padding: 0 10px;
    }

</style>
</body>
</html>
